<!DOCTYPE html>
<html>
<head>
    <title>$app.topic banner管理</title>
    #parse("/inc/meta.htm")
</head>
<body id="inner_page_start">
<div class="modal fade" id="ex-back-sm" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4" id="deleteItemConfirm">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">⚠️注意：数据删除将无法恢复</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <a href="#" class="btn btn-danger" id="del-button-confirm">确认</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="ex-back-big" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="/system/configInfo" type="post">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h4" id="myExtraLargeModalLabel">系统配置信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">

                    <input type="hidden" name="id" id="menu-id">
                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <label for="menu-des" class="col-form-label col-sm-2">名称</label><div class="col-sm-6">
                        <input type="text" class="form-control" id="menu-des" name="des"/></div>
                    </div>
                    <div class="form-group row" id="value-area">
                        <div class="col-sm-2"></div>
                        <label for="menu-value" class="col-form-label col-sm-2">值</label>
                        <div class="col-sm-6"><input type="text" class="form-control" id="menu-value" name="value"/></div>
                    </div>
                    <div class="form-group row" id="img-area" style="display: none;">
                        <div class="col-sm-2"></div>
                        <label for="img-for-menu" class="col-form-label col-sm-2 ">
                            <span class="btn btn-primary">上传图片</span>
                            </label>
                        <div class="col-sm-6">
                            <input type="file" name="file" style="display: none ;" id="img-for-menu"
                                   onchange="imgPreview(this)">
                            <img src="" id="img-area-value" style="width: 60%;" />
                        </div>
                    </div>
                    <div class="form-group  row">
                        <div class="col-sm-2"></div>
                        <label for="menu-key" class="col-form-label col-sm-2">英文名</label>
                        <div class="col-sm-6"><input type="text" class="form-control" id="menu-key" name="key"/></div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <label for="menu-type" class="col-form-label col-sm-2">type</label><div class="col-sm-6">
                        <select type="text" class="form-control" id="menu-type" name="type">
                            <option value="1">系统参数</option>
                            <option value="0">客户端参数</option>
                        </select></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="sub-button-config">新建</button>
                </div>
            </div>
        </form>
    </div>
</div>
#parse("/inc/header.htm")
<div id="wrapper">
    #parse("/inc/menu.htm")
    <div id="content-wrapper">
        <div class="container-fluid">
            <!-- 面包屑-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    系统设置
                </li>
                <li class="breadcrumb-item active">banner</li>
            </ol>
        </div>
        <!-- /.container-fluid class="card mb-3"-->
        <div class="container-fluid">
            <div class="card-body">
                    <div class="form-inline">
                        <div class="form-group mx-sm-3">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ex-back-big" >
                                新建配置项</button>
                        </div>
                    </div>
                    <br/>

                    <div class="row">
                        <div class="col-sm-12 table-outer-box">
                            <table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
                                <thead>
                                <tr role="row">
                                    <th>名称</th>
                                    <th>值</th>
                                    <th>英文名</th>
                                    <th>类型</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!--  style="background:url($!app.staticUrl$!row.img)"  -->
                                #foreach( $row in $respData )
                                <tr #if($change == $!row.id) style="background: #0bb20c" #end>
                                    <td>
                                        $!row.des
                                    </td>
                                    <td style="max-width: 350px;">
                                        #if($!row.key.endsWith("Img") || $!row.key.endsWith("Ico"))
                                            #if($!row.value.startsWith("http"))
                                                <img src="$!row.value" style="width: 80%;"/>
                                            #else
                                                <img src="$!app.staticUrl$!row.value" style="width: 80%;" />
                                            #end
                                        #else
                                            $!row.value
                                        #end
                                    </td>
                                    <td>
                                        $!row.key
                                    </td>
                                    <td>
                                        #if($!row.type == 1)
                                        系统参数
                                        #else
                                        客户端参数
                                        #end
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#ex-back-big"
                                                data-mid="$!row.id">编辑</button>
                                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#ex-back-sm"
                                                data-kid="$!row.id" type="button">删除</button>
                                    </td>
                                </tr>
                                #end
                                </tbody>
                            </table>
                        </div>
                    </div>
            </div>
        </div>
        #parse("/inc/copyright.htm")
    </div>
    <!-- /.content-wrapper -->
</div>
#parse("/inc/footer.htm")
<script>

    var host = "$!app.staticUrl"

    $("#ex-back-sm").on('show.bs.modal',function (ev) {
        var domTarget = $(ev.relatedTarget)
        var id = domTarget.data('kid');
        $("#del-button-confirm").attr("href","/system/delConfig?id="+id)
    })

    $('#ex-back-big').on('show.bs.modal', function (event) {
        $("#up-error").text("");
        var button = $(event.relatedTarget)
        var mid = button.data('mid')
        if(mid){
            $("#menu-id").val(mid)
            $("#sub-button-config").text("更新")
            role(mid)
        }else{
            $("#value-area").show()
            $("#img-area").hide()
            $("#img-area-value").attr("src","")

            $("#menu-key").val("")
            $("#menu-value").val("")
            $("#menu-des").val("")
            $("#menu-type").val("")
            $("#menu-id").val("")
            $("#sub-button-config").text("新建")
        }
    })

    function role(mid){
        if(!mid)
            mid = ""
        var good = false
        $.ajax({
            url: "/system/configItem",
            data: { id:mid },
            type: "POST",
            dataType: "json",
            async: false,
            success: function(data) {
                if(data.state == "000"){
                    good = true
                    $("#menu-key").val(data.data.key)
                    $("#menu-des").val(data.data.des)
                    $("#menu-value").val(data.data.value)
                    $("#menu-type").val(data.data.type)
                    if(data.data.key.endsWith("Img")||data.data.key.endsWith("Ico")){
                        // show image
                        var imgURL =data.data.value
                        $("#value-area").hide()
                        if(!imgURL.startsWith("http"))
                            imgURL = host + imgURL
                        $("#img-area").show()
                        $("#img-area-value").attr("src",imgURL)
                    }else{
                        $("#value-area").show()
                        $("#img-area").hide()
                        $("#img-area-value").attr("src","")
                    }
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("网络异常，请稍后重试"+textStatus)
                setTimeout(function(){
                    $("#ex-back-big").modal("hide")
                },500);
            }
        });

        return good
    }

    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        if(!file){
            alert("请重新选择图片！");
            return ;
        }
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }

        $("#up-error").text("正在上传......");

        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("img-area-value");
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);

        var formData = new FormData();
        formData.append("file", $("#menu-value")[0].files[0]); //添加图片信息的参数
        formData.append("op", "file"); //添加其他参数
        formData.append("folder", "banner");
        $.ajax({
            url: "/img/in",
            type: "POST",
            cache: false, //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function(data) {
                //var rs = data;
                if (data.state == "000") {
                    $("#up-error").text("上传成功！图片可用");
                    $("#img-area-value").attr("src",host+ data.data);
                    $("#menu-value").val(data.data)
                } else {
                    tipTopShow(data.data);
                }
            },
            error: function(data) {
                tipTopShow("上传失败,请稍后重试。");
            }
        });
    }

    function tipTopShow(ms) {
        $("#up-error").text(ms);
        $("#img-area-value").removeAttr("src");
    }
</script>
</body>
</html>